/*
    * @moudule:@/views/home/incomeView
    * @author:zengfx
    * @date:2020-10-19
 */

<template>
  <div class="incomeView_container">
    <header>
      <p>资产视图</p>
    </header>
    <main>
      <el-form :inline="true" :model="formInline" class="main_searchBar">
        <el-form-item label="账期:">
          <el-select size="mini" v-model="formInline.year" clearable>
            <el-option v-for="(item,index) in yearList" :key="index" :label="item.label" value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区域:">
          <el-select size="mini" v-model="formInline.area" clearable>
            <el-option v-for="(item,index) in yearList" :key="index" :label="item.label" value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资产编码:">
          <el-input size="mini" type="text" v-model="formInline.assetsNum" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" id="search_btn" @click="handle_search">查询</el-button>
          <el-button size="mini" id="export_btn" @click="handle_export">导出</el-button>
        </el-form-item>
      </el-form>
      <div class="main_navBar">
        <el-menu size="mini" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item :index="tab.value" v-for="(tab,tabIndex) in tabList" :key="tabIndex">{{tab.label}}</el-menu-item>
        </el-menu>
      </div>
      <el-table size="mini" :header-cell-style="{background:'#eef1f6'}" :data="tableData" border height="300" style="width: 100%" v-loading="showTableLoading">
        <el-table-column v-for="(item,index) in tabTitleList" :key="index" :prop="item.prop" :label="item.label"></el-table-column>
      </el-table>
    </main>
  </div>
</template>

<script>
export default {
    data() {
        return {
            formInline: {
                year: '',
                area: '',
                assetsNum: ''
            },
            yearList: [],
            tabList: [
                {
                    label: '看订购信息',
                    value: '1'
                },
                {
                    label: '看OOCP缴费信息',
                    value: '2'
                },
                {
                    label: '看出账',
                    value: '3'
                },
                {
                    label: '看欠费',
                    value: '4'
                },
                {
                    label: '看收入',
                    value: '5'
                }
            ],
            tableData: [{ date: '123', '202001': '123' }],
            activeIndex: '1',
            tabTitleList: [],
            tabTitleList1: [
                { label: '号码', prop: 'date' },
                { label: '销售品ID', prop: 'date' },
                { label: '销售品名称', prop: 'date' },
                { label: '创建时间', prop: 'date' },
                { label: '生效时间', prop: 'date' },
                { label: '失效时间', prop: 'date' }
            ],
            tabTitleList2: [
                { label: '号码', prop: 'date' },
                { label: '订单编号', prop: 'date' },
                { label: '营业员', prop: 'date' },
                { label: '营业厅', prop: 'date' },
                { label: '优惠ID', prop: 'date' },
                { label: '优惠名称', prop: 'date' },
                { label: '优惠开始时间', prop: 'date' },
                { label: '优惠结束时间', prop: 'date' },
                { label: '订单状态', prop: 'date' }
            ],
            tabTitleList3: [
                { label: '号码', prop: 'date' },
                { label: '账期', prop: 'date' },
                { label: '账目编码', prop: 'date' },
                { label: '原始金额', prop: 'date' },
                { label: '优惠金额', prop: 'date' },
                { label: '优惠后金额', prop: 'date' }
            ],
            tabTitleList4: [
                { label: '号码', prop: 'date' },
                { label: '账期', prop: 'date' },
                { label: '账目编码', prop: 'date' },
                { label: '原始金额', prop: 'date' },
                { label: '缴费金额', prop: 'date' },
                { label: '欠费金额', prop: 'date' }
            ],
            tabTitleList5: [
                { label: '号码', prop: 'date' },
                { label: '账期', prop: 'date' },
                { label: '账目编码', prop: 'date' },
                { label: '含税收入', prop: 'date' },
                { label: '税金', prop: 'date' },
                { label: '税后收入', prop: 'date' }
            ],
            showTableLoading: false
        };
    },
    watch: {
        activeIndex: {
            handler(newVal, oldVal) {
                this.showTableLoading = true;
                switch (newVal) {
                    case '1':
                        this.tabTitleList = this.tabTitleList1;
                        break;
                    case '2':
                        this.tabTitleList = this.tabTitleList2;
                        break;
                    case '3':
                        this.tabTitleList = this.tabTitleList3;
                        break;
                    case '4':
                        this.tabTitleList = this.tabTitleList4;
                        break;
                    case '5':
                        this.tabTitleList = this.tabTitleList5;
                        break;
                }
                this.showTableLoading = false;
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        handle_search() {},
        handle_export() {},
        handleSelect(key) {
            this.activeIndex = '' + key;
        }
    }
};
</script>

<style lang="scss" scoped>
.incomeView_container {
    width: 100%;
    height: 100%;
    & > header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eaeaea;
        height: 40px;
        margin: 0 -20px;
        padding: 0 20px;
        & > p {
            font-weight: bold;
            font-size: 15px;
        }
    }
    & > main {
        // padding: 0 10px 10px;
        .main_searchBar {
            border-bottom: 1px solid #d6d9e5;
            /deep/ .el-form-item {
                margin: 6px 10px 6px 0;
            }
            button {
                color: #fff;
                border: none;
                outline: none;
                &:hover {
                    opacity: 0.8;
                }
            }
            #search_btn {
                background-color: #2a90de;
            }
            #export_btn {
                background-color: #2cd531;
            }
        }
        .main_navBar {
            margin: 10px 0;
            background-color: #f5f5f5;
            /deep/ .el-menu--horizontal {
                & > .el-menu-item.is-active {
                    color: #2a90de;
                }
                & > .el-menu-item {
                    height: 50px;
                    line-height: 50px;
                }
            }
        }
    }
}
</style>